/**
在 React 中， `render`  函数的优化是提升组件性能的重要方面。通过优化  `render`  函数，可以减少不必要的渲染，提高应用的响应速度。
  1. 避免不必要的渲染
  - PureComponent 和 React.memo：使用  `React.PureComponent`  或  `React.memo`  可以自动进行浅比较，避免不必要的渲染。只有当 props 或 state 发生变化时，组件才会重新渲染。
  jsx
    class MyComponent extends React.PureComponent {
      render() {
        return <div>{this.props.value}</div>;
      }
    }
  jsx
    const MyFunctionalComponent = React.memo(({ value }) => {
      return <div>{value}</div>;
    });
  2. 使用 shouldComponentUpdate

  在类组件中，重写  `shouldComponentUpdate`  方法可以控制组件是否需要重新渲染。通过返回  `false`  可以阻止不必要的渲染。
  jsx
  class MyComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
      return nextProps.value !== this.props.value;
    }

    render() {
      return <div>{this.props.value}</div>;
    }
  }
  3. 避免匿名函数和内联函数

  在  `render`  方法中使用匿名函数或内联函数会导致每次渲染时都创建新的函数实例，可能导致子组件不必要的重新渲染。可以提前定义函数，避免每次渲染都生成新函数。
  jsx
  class MyComponent extends React.Component {
    handleClick = () => {
      // 处理点击事件
    };

    render() {
      return <button onClick={this.handleClick}>Click me</button>;
    }
  }
  4. 使用键值（key）优化列表渲染

  在渲染列表时，使用唯一的  `key`  属性可以帮助 React 更高效地识别哪些项目发生了变化，从而优化渲染过程。
  jsx
  const items = this.props.items.map(item => (
    <li key={item.id}>{item.name}</li>
  ));
  5. 避免不必要的状态更新

  确保只在需要时更新状态。使用函数形式的  `setState`  可以避免基于旧状态的错误更新。
  jsx
  this.setState((prevState) => ({
    count: prevState.count + 1,
  }));
  6. 使用懒加载和代码分割

  对于大型应用，使用 React 的懒加载和代码分割功能（如  `React.lazy`  和  `Suspense` ）可以减少初始加载时间，提高性能。
  jsx
  const LazyComponent = React.lazy(() => import('./LazyComponent'));

  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
  7. 总结
  优化  `render`  函数可以显著提升 React 应用的性能。通过使用  `PureComponent` 、 `React.memo` 、合理利用  `shouldComponentUpdate` 、避免匿名函数、优化列表渲染以及使用懒加载等技术，可以减少不必要的渲染，提高用户体验。在开发过程中，合理评估和应用这些优化策略是非常重要的。
 */
import React, { Component } from 'react'

import Home from './components/Home'
import Recommend from './components/Recommend'
import Profile from './components/Profile'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      message: 'Hello World',
      counter: 0
    }
  }

  // shouldComponentUpdate(nextProps, nextState) {
  //   // App进行性能优化的点
  //   // if (this.state.message !== nextState.message || this.state.counter !== nextState.counter) {
  //   //   return true
  //   // } else {
  //   //   return false
  //   // }
  // }

  changeText() {
    this.setState({
      message: 'Hello React'
    })
  }

  changeCounter() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  
  render() {
    console.log('App render');
    
    const { message, counter } = this.state
    
    return (
      <div>
        <h3>App: {message} - {counter}</h3>
        <button onClick={e => this.changeText()}>修改文本</button>
        <button onClick={e => this.changeCounter()}>修改计数器</button>
        <Home message={message}/>
        <Recommend counter={counter}/>
        <Profile message={message}/>
      </div>
    )
  }
}
